<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>打字机效果</title>
</head>
<body>
<div class="autotype" id="autotype">
    <p>一场雨把我困在这里</p>
    <br/>
    <p>你温柔的表情</p>
    <p>会让我伤心</p>
    <br/>
    <p>六月的雨，只是无情的你~</p>
</div>
<script src="jquery-2.0.3.js"></script>
<script>

    $.fn.autotype = function(){
        var $text = $(this);
        console.log('$text:',$text);

        var str = $text.html();//返回被选 元素的内容
        console.log(str)
        var index = 0;

        var timer = setInterval(function(){
            //substr(index, 1) 方法在字符串中抽取从index下标开始的一个的字符
            var current = str.substr(index, 1);

            if(current == '<'){
                //indexOf() 方法返回">"在字符串中首次出现的位置。
                index = str.indexOf('>', index) + 1;
            }else{
                index ++ ;
            }
//            console.log(["0到index下标下的字符",str.substring(0, index)],["符号",index & 1 ? '_': ''],[index]);
            //substring() 方法用于提取字符串中介于两个指定下标之间的字符
            $text.html(str.substring(0, index) + (index & 1 ? '_': ''));
            if(index >= str.length){
                clearInterval(timer);
            }
        },100);
    };

    $("#autotype").autotype();
</script>
</body>
</html>